<template>
    <div class="footer">
        <div class="main-wrap  pt-50 pb-20">
            <div class="flex flex-sb">
                <div class="company-info" v-scroll-animate="'fadeInLeft'">
                    <img src="@/assets/images/logo_white.png" alt="">
                    <div class="f-18 f-bold mt-30 mb-30">安徽标信查数据技术有限公司</div>
                    <div class="flex flex-ai-center mb-15">
                        <img src="@/assets/images/address.png" alt="">
                        <div class="f-16 ml-10">安徽省合肥市高新区云飞路软件园二期F3栋15层</div>
                    </div>
                    <div class="flex flex-ai-center">
                        <i class="iconfont icon-dianhuahover" style="font-size:22px;color: #fff;"></i>
                        <div class="f-16 ml-10">&nbsp;400-109-7887</div>
                    </div>
                </div>
                <dl v-scroll-animate="'fadeInRight'">
                    <dt>产品能力</dt>
                    <template v-if="props.type === 'model'">
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('product')">产品概述</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('capability')">核心能力</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('technology')">技术优势</a>
                        </dd>
                    </template>
                    <template v-if="props.type === 'analysis'">
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('product')">产品概述</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('advantage')">核心优势</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('path')">实现路径</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('access')">接入方式</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('security')">数据安全</a>
                        </dd>
                    </template>
                    <template v-else-if="props.type === 'written'">
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('product')">产品概述</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('capability')">编写功能</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('collaboration')">多人协作</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" class="" @click="scrollToSection('assistant')">智能辅助</a>
                        </dd>
                    </template>

                </dl>
                <dl v-scroll-animate="'fadeInRight'">
                    <dt>标准工具</dt>
                    <dd>
                        <a href="/tool/" target="_blank">标信查解析器</a>
                    </dd>
                    <dd>
                        <a href="/tool/written" target="_blank">标信查编写器</a>
                    </dd>
                    <dd>
                        <a href="/tool/model" target="_blank">知也大模型</a>
                    </dd>
                </dl>
                <dl v-scroll-animate="'fadeInRight'">
                    <dt>关于我们</dt>
                    <dd>
                        <a href="https://www.zsxjt.cn/" target="_blank">企业简介</a>
                    </dd>
                </dl>
            </div>

            <div v-scroll-animate="'fadeInUp'" class="copyright">Copyright © 2013-2025 BiaoXinCha.A Rights Reserved.标信查
                版权所有|备案号 <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">皖ICP备2022010709号</a>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const props = defineProps({
    type: {
        type: String,
        default: 'model'
    }
})
// 添加平滑滚动函数
const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
        const rect = element.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const targetPosition = rect.top + scrollTop - 80;
        window.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
        });
    }
}

</script>


<style scoped lang="scss">
.footer {
    background-color: #151B26;
    color: #D7D7D7;

    .company-info {
        width: 650px;
    }

    dl {
        flex: 1;

        dt {
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
        }

        dd {
            padding: 0;
            margin: 20px 0 0 0;
            font-size: 14px;
            color: #D7D7D7;

            a:hover {
                color: #045CFF;
            }
        }
    }

    .copyright {
        padding-top: 20px;
        margin-top: 40px;
        border-top: 1px solid #2F343E;
        text-align: center;
        font-size: 14px;
    }
}

a:hover {
    color: $primary-color !important;
}
</style>